<template>
  <div>
    <el-card shadow="never" class="card">
      <div slot="header" class="clearfix">
        <span>本专业学生就业信息</span>
        <span style="padding-left: 56%">专业共有 <el-button type="primary" size="mini"
                                                        round>{{ page_data.page_total }}</el-button>名学生，其中已就业的有<el-button
            type="success" size="mini" round>{{ page_data.tg }}</el-button>名</span>
      </div>
      <div id="charts_one" style="width:100%;min-height:300px">
        <el-select v-model="value" placeholder="性别" style="width: 100px; margin-left: 65%">
          <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
        <el-input v-model="name" placeholder="就职单位" style="width: 160px; margin-left: 6px"></el-input>

        <el-button type="primary" icon="el-icon-search" style="margin-left: 10px;" @click="seach">搜索</el-button>

        <el-table
            size="small"
            :data="user_data"
            max-height="350"
            style="width: 100%"
            align="center"
        >
          <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
          <el-table-column property="uid" label="学号" width="240" align="center"></el-table-column>
          <el-table-column property="name" label="姓名" align="center"></el-table-column>
          <el-table-column property="sex" label="性别" align="center"></el-table-column>
          <el-table-column property="cla" label="班级" align="center"></el-table-column>
          <el-table-column property="telephone" label="电话" align="center"></el-table-column>
          <el-table-column property="employment.gc" label="就职单位" align="center"></el-table-column>
          <el-table-column property="employment.salary" label="薪资" align="center"></el-table-column>
          <el-table-column label="操作" width="120" align="center">
            <template slot-scope="scope">
              <el-button size="mini" type="success" @click="editor_user(scope.row.uid)">
                <i class="el-icon-edit-outline"/>
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <el-pagination
            @size-change="page_size_change"
            @current-change="current_change"
            :current-page="page_data.page_num"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="page_data.row_num"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page_data.tg"
            style="margin-top:10px"
        ></el-pagination>
      </div>
    </el-card>
    <el-dialog :title="dialog_title" :visible.sync="dialog_viside_state" style="height: 1000px">
      <div style="height: 500px">
        <div style="width: 30%;float: left">
          <h3>
            <i class="fa fa-user" aria-hidden="true"></i>基本信息</h3>
          <hr/>
          <ul>
            <li>
              <label>就职单位：</label>
              <span>{{employInfo.gc}}</span>
            </li>
            <li>
              <label>就职岗位：</label>
              <span>{{employInfo.gw}}</span>
            </li>
            <li>
              <label>薪资：</label>
              <span>{{employInfo.salary}}</span>
            </li>
            <li>
              <label>岗位属性：</label>
              <span>{{employInfo.type}}</span>
            </li>
          </ul>
        </div>
        <div style="width: 65%;float: right;height: 75%" >
          <h3>
            <i class="fa fa-user" aria-hidden="true"></i>Office照片</h3>
          <hr/>
          <el-image :src="qz+employInfo.emimg" style="width: 400px; height: 400px"
                    :preview-src-list="srcList">
            >
            <div slot="placeholder" class="image-slot">
              加载中<span class="dot">...</span>
            </div>
          </el-image>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      employInfo:{},
      qz:this.$axios.defaults.baseURL,
      srcList: [
      ],
      emp_from:{
        gc:"",
        gw:"",
        types:"",
        salary:""
      },
      dialog_viside_state: false,
      password_input_state: false,
      selection_data: [],
      options: [
        {
          value: '男',
          label: '男生'
        }, {
          value: '女',
          label: '女生'
        }, {
          value: '全部',
          label: '全部'
        }],
      value: '',
      name:'',
      dialog_title: "",
      resume_status:'',
      resume_info:'',
      user_data: [],
      page_data: {
        row_num: 10,
        page_num: 1,
        page_total: 0,
        tg: 0,
      },
    };
  },
  methods: {
    editor_user(_uid) {
      this.dialog_title = "详细信息";
      this.dialog_viside_state = true;
      this.$axios({
        url: this.$axios.defaults.baseURL+"/teacher/stuempinfo",
        method: "get",
        params: {
          uid:_uid,
        }
      }).then(res => {
        this.srcList.push(this.$axios.defaults.baseURL+res.data.emimg);
        this.employInfo = res.data;
        console.log(this.employInfo)
      })
    },
    page_size_change(row_num) {
      this.page_data.row_num = row_num;
      this.$message.success('每页显示' + row_num + '条数据')
      this.get_user_data()
    },
    current_change(click_page) {
      this.page_data.page_num = click_page
      this.$message.success('正在展示第' + click_page + '页数据')
      this.get_user_data(this.row_num, click_page)
    },
    seach(){
      this.get_user_data(10,1)
    },
    get_user_data(_row, _currenpag) {
      //发送请求
      this.$axios({
        url: this.$axios.defaults.baseURL+"/teacher/selectmajortuinfo",
        method: "get",
        params: {
          row: _row,
          currenpag: _currenpag,
          sex : this.value,
          gc:this.name,
          major:sessionStorage.getItem("headmajor")
        }
      }).then(res => {
        this.user_data = res.data.list;
        this.page_data.page_total = res.data.total;
        this.page_data.tg = res.data.tg;
      })
    },
  },

  mounted() {
    this.get_user_data(10, 1);
  },
};
</script>
<style scoped>
li{
  margin-top: 8px;
  list-style: none;
}
</style>